import React, { useState } from 'react';
import { Modal, Button } from 'antd';
import './css/style.css'
const Mantle = () => {
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    return (
        <>
            <div onClick={showModal} className='getmantle'>
                <p><svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5019" width="16" height="16"><path d="M750.535901 653.616324c-43.287782 0-82.48588 17.828115-110.653913 46.518366L395.697941 559.249472c6.530798-16.423246 10.125911-34.322014 10.125911-53.044044 0-15.762794-2.554773-30.938861-7.255759-45.144216l229.464666-153.118433c25.846722 24.615926 60.805638 39.746939 99.232696 39.746939 79.398649 0 143.993952-64.595303 143.993952-143.993952 0-79.410937-64.595303-144.016479-143.993952-144.016479s-143.993952 64.605543-143.993952 144.016479c0 15.822183 2.573204 31.053544 7.309005 45.306001L361.184446 402.074121c-25.85901-24.683507-60.8681-39.862646-99.354547-39.862646-79.398649 0-143.993952 64.595303-143.993952 143.993952s64.595303 143.993952 143.993952 143.993952c35.346995 0 67.753186-12.809702 92.839109-34.020971L603.357443 759.663454c-5.162791 15.437176-7.966385 31.944386-7.966385 49.09669 0 85.547511 69.598357 155.145868 155.145868 155.145868 85.546487 0 155.144844-69.598357 155.144844-155.145868C905.680745 723.213657 836.082389 653.616324 750.535901 653.616324zM727.264431 138.219859c36.090388 0 65.451331 29.372206 65.451331 65.474882 0 36.090388-29.360943 65.452355-65.451331 65.452355s-65.451331-29.361967-65.451331-65.452355C661.8131 167.592065 691.174043 138.219859 727.264431 138.219859zM261.828875 571.656758c-36.090388 0-65.452355-29.360943-65.452355-65.451331s29.361967-65.452355 65.452355-65.452355 65.452355 29.361967 65.452355 65.452355S297.919263 571.656758 261.828875 571.656758zM750.535901 886.333078c-42.773756 0-77.572934-34.798154-77.572934-77.572934 0-42.772732 34.798154-77.57191 77.572934-77.57191 42.772732 0 77.57191 34.798154 77.57191 77.57191C828.107811 851.534924 793.309657 886.333078 750.535901 886.333078z" p-id="5020" fill="#8a8a8a"></path></svg></p>
                <p> 分享</p>
            </div>
            <Modal title="分享海报" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} okText='下载' cancelText='关闭'>
                <div className='manteld'>
                    <div className="img">
                        <img src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-07-24/1_6FIJsfsbLPuRpzxvlGoVWw.png" alt="" />
                    </div>
                    <h3><b>Web性能指南</b></h3>
                    <p>Web性能权威指南阅读笔记</p>
                    <div className="code">
                        <div className="codeleft">
                        </div>
                        <div className="coderight">
                            <p>识别二维码查看文章</p>
                            <p>原文分享自 <span>小楼又情风</span></p>
                        </div>
                    </div>
                </div>
            </Modal>
        </>
    )
}


export default Mantle